window.addEventListener('load', () => {
  // 渲染类别下拉选框
  function randercate() {
    axios.get('/my/article/cates')
      .then(res => {
        let select = document.querySelector('select')
        select.innerHTML = template('tpl-cate', res.data)
        layui.form.render()
      })
  }
  randercate()
  // 富文本编辑器调用
  initEditor()
  // 获取图片
  randerimg()

  function randerimg() {
    var $image = $('#image')
    // 1.2 配置选项
    const options = {
      // 纵横比
      aspectRatio: 4 / 3,
      // 指定预览区域
      preview: '.img-preview'
    }

    // 1.3 创建裁剪区域
    $image.cropper(options)
    let btnChooseImage = document.querySelector('#btnChooseImage')
    let file = document.querySelector('#coverFile')
    btnChooseImage.addEventListener('click', () => {
      file.click()
    });
    file.addEventListener('change', function (e) {
      console.log(e.target.files);
      // 获取用户选择的文件
      var filelist = e.target.files
      if (filelist.length === 0) {
        return layer.msg('请选择照片！')
      }

      // 1. 拿到用户选择的文件
      var file = e.target.files[0]
      // 2. 将文件，转化为路径
      var imgURL = URL.revokeObjectURL(file)
      // 3. 重新初始化裁剪区域
      $image
        .cropper('destroy') // 销毁旧的裁剪区域
        .attr('src', imgURL) // 重新设置图片路径
        .cropper(options) // 重新初始化裁剪区域
    })
  }
  // 绑定发布事件
  let pubbtn = document.querySelector('.pubbtn')
  let btnSave2 = document.querySelector('#btnSave2')
  let form1 = document.querySelector('#form-pub')
  console.log(form);
  form.on('submit(formDemo)',function(data) {
    // var dataURL = $image
    //   .cropper('getCroppedCanvas', {
    //     // 创建一个 Canvas 画布
    //     width: 400,
    //     height: 300
    //   })
    //   .toBlob('image/png')
    let formData = new FormData(form1)
    formData.forEach((value, key) => {
      console.log(value, key);
    })
    console.log(formData);
  })

})
